<template>
    <div :class="`mmv-avatar__${size}`" class="mmv-avatar">
        <img :src="src" class="mmv-avatar__img" />
        <img :src="pendant" class="mmv-avatar__pendant" />
        <div class="mmv-avatar__auth">
            <span class="mmv-authentication-mark">
                <!-- 官方认证 -->
                <img class="mmv-img-icon mmv-authentication-mark__icon" src="@/assets/icon-auth/official.png" v-if="is_official" />
                <!-- 个人认证 -->
                <img class="mmv-img-icon mmv-authentication-mark__icon" src="@/assets/icon-auth/personal.png" v-if="is_personal" />
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        size: {
            type: String,
            default: "md",
        },
        is_official: {
            type: Boolean,
            default: false,
        },
        is_personal: {
            type: Boolean,
            default: false,
        },
        pendant: {
            type: String,
            // default: "",
            default:
                "https://upload-bbs.mihoyo.com/upload/2020/08/19/3435a14ebb7af0a70cfe07c53a921b30_1956186495542818369.png",
        },
        src: {
            type: String,
            // default: "",
            default:
                "https://img-static.mihoyo.com/communityweb/upload/6cf321d46524a861ffdabe541ad000e4.png",
        },
    },
};
</script>

<style lang="less">
.mmv-avatar {
    display: inline-block;
    position: relative;
    &__xs {
        width: 24px;
        height: 24px;
    }
    &__sm {
        width: 32px;
        height: 32px;
    }
    &__md {
        width: 44px;
        height: 44px;
    }
    &__lg {
        width: 60px;
        height: 60px;
    }
    &__xl {
        width: 80px;
        height: 80px;
    }
    &__xxl {
        width: 120px;
        height: 120px;
    }
    &__img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #ebebeb;
        vertical-align: top;
    }
    &__auth {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 5;
    }
    &__xs &__auth {
        font-size: 8px;
        img {
            height: 8px;
        }
    }
    &__sm &__auth {
        font-size: 12px;
    }
    &__md &__auth {
        font-size: 14px;
    }
    &__lg &__auth,
    &__xl &__auth {
        font-size: 18px;
        right: 0;
    }
    &__xxl &__auth {
        font-size: 22px;
        right: 5px;
        bottom: 5px;
    }
    &__pendant {
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(128.5% - 2px);
        height: calc(128.5% - 2px);
        pointer-events: none;
        z-index: 2;
    }
}
</style>